<template>
	<view>
		<view class="whole" v-if="warningList.length==0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
		<view  v-if="warningList.length!=0">
		<view class="card" v-for="(item,index) in warningList " :key="index" @click="details(item,index)">
			<view class="top">
				<image v-if="item.status=='0'" src="/static/image/warning.png" mode="aspectFit"></image>
				<image v-if="item.status=='1'" src="/static/image/greenAlarm.png" mode="aspectFit"></image>
			    <text class="name">{{item.memberName}}</text>
				<text v-if="item.memberName==''||item.memberName==null " class="name">{{item.buildingName}}</text>
				<text class="tiem">{{item.alarmTime}}</text>
			</view>
			<hr/>
			<view class="center">
				<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
					<tBody>
						<tr>
							<td class="td_1">报警类型:</td>
							<td class="td">{{item.devName}}</td>
						</tr>
						<tr>
							<td class="td_1">报警信息:</td>
							<td class="td" style="color: #ff0000;">{{item.alarmDetail}}</td>
						</tr>
					</tBody>
				</table>
			</view>
			<hr/>
			<view class="bottom">
				<table cellSpacing="0" cellpadding="1" width="100%" class="ctl">
					<tBody>
						<tr>
							<td class="td_1">处理状态:</td>
							<td class="td" v-if="item.status=='0'">未处理</td>
							<td class="td" v-if="item.status=='1'" style="color: #1AFA29;">已解除</td>
						</tr>
					</tBody>
				</table>
			</view>
		</view>
		<text class="loading-text">
			{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
		</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warningList:[],
				warningList_houseNo:[],
				unreadPages:1,
				loadingType:'0',
				roomNumber:'',//房间号
				homeName:'',
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				scrollTop:'',
			}
		},
		onLoad() {
			this.roomNumber=uni.getStorageSync("roomNumber")
			console.log(this.roomNumber)
			this.warning()
		},
		// scrollTop是data中定义的变量，可以将页面的滚动值赋值保存下来。
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// console.log(this.scrollTop)
		},
		onReachBottom(){
			this.getWarningList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			this.warning();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onBackPress(e) {
			if(e.from == "backbutton"){
				uni.setStorage({
					key:"newsTop",
					data:0
				})
				uni.navigateBack();
				return true;
			}
		},
		onShow() {
			this.onSocketMessage()
			// this.warning();
			uni.getStorage({
				key:"newsTop",
				success:(res)=> {
					console.log(res.data);
					var timer = setTimeout(()=>{
						uni.pageScrollTo({
						    scrollTop: res.data,  //距离页面顶部的距离
						    duration: 0
						});
						clearTimeout(timer);
					},100)
				}
			})
				uni.$on("planAdd", res => {
				    console.log(res);
					for (let i = 0; i < this.warningList.length; i++) {
						if (this.warningList[i].id == res.id) {
							this.warningList[i].status=res.status
						}
					}
					// 清除监听
					uni.$off('planAdd');
				})
		},
		methods: {
			//获取警告列表
			async warning() {
				const res = await this.$myRequest({
					url: '/api-alarm/alarms/',
					method: "get",
					data: {
						houseNo:this.roomNumber,
						alarmCategory:'02',
						// pageSize:"10"
					}
				})
				if (res.success == true) {
					this.warningList = res.data.data;
					this.unreadPages++
					
					if(this.warningList==null){
						this.warningList=[]
					}
					// for(let i = 0; i < res.data.data.length; i++){
					// 	if(this.roomNumber==res.data.data[i].houseNo){
					// 		this.warningList_houseNo=this.warningList_houseNo.concat(res.data.data[i])
					// 	}
					// }
					// console.log(JSON.stringify(this.warningList))
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					}, 50);
			}
		},
		details(warningList,index){
			console.log(warningList.buildingName)
			uni.navigateTo({
				url: '/pages/alarmAata/alarmDetails?memberName=' +warningList.memberName+
				 "&devName="+warningList.devName+"&alarmTime="+warningList.alarmTime+
				 "&alarmDetail="+warningList.alarmDetail+"&id="+warningList.id+
				 "&status="+warningList.status+"&buildingName="+warningList.buildingName
			})
			uni.setStorage({
				key:"newsTop",
				data:this.scrollTop
			})
		},
		/* 上拉加载未读列表 */
		async getWarningList() {
				this.unreadPages++
				if (this.loadingType != 0) {
					return false; //loadingType!=0;直接返回
				}
				this.loadingType = 1;
				// uni.showNavigationBarLoading();
				const res = await this.$myRequest({
					url: '/api-alarm/alarms/',
					method: "get",
					data: {
						houseNo:this.roomNumber,
						alarmCategory:'02',
						pageNumber: this.unreadPages,
					},
				})
				if (res.success == true) {
					if (this.warningList != null) {
						if (this.warningList.length == res.data.totalSize) { //当之前的数据长度等于count时跳出函数，不继续执行下面语句
							this.loadingType = 2;
							// uni.hideNavigationBarLoading(); //关闭加载动画
							return false;
						}
						this.warningList = this.warningList.concat(res.data.data)
						
					}
					this.loadingType = 0; //将loadingType归0重置
					// uni.hideNavigationBarLoading(); //关闭加载动画
				}
		},
		//	打开成功监听服务器返回的告警信息
		onSocketMessage() {
			uni.onSocketMessage(res => {
				// console.log(JSON.parse(res.data));
				getApp().globalData.getSocketMsg(res.data);
				const data = JSON.parse(res.data)
				this.homeName=data.msg.houseNo
				if (data.code == "99") {
					if(data.msgType=="pension.com.alarm.entity.Alarm"){
						this.roomNumber=uni.getStorageSync("roomNumber")
						if(this.homeName==this.roomNumber){
						console.log(data);
						this.warning();
						}
					}
				}
			});
		}
	},
	}
</script>

<style lang="less">
	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;
	
		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}
	.loading-text {
		margin-bottom: 40rpx;
		height: 50rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	
		// margin: 100rpx;
		color: #959595;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.card{
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
		hr {
			width: 100%;
			height: 1px;
			border: 0;
			margin-bottom: 10rpx;
			background-color: #c3c7cc;
		}
		.top{
			margin:  0 20rpx;
			display: flex;
			height: 80rpx;
			text-align: center;
			image{
				width: 60rpx;
				height: 80rpx;
			}
			.name{
				margin-left: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}
			.tiem{
				font-size: 28rpx;
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				right: 40rpx;
			}
		}
		.center{
			margin: 0 20rpx;
			padding: 5rpx 0;
			// background-color: #00ff7f;
			.ctl {
				table-layout: fixed;
			
				.td_1 {
					color: #959595;
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}
			
				.td {
					word-break: break-all;
					color: #000000;
				}
			}
		}
		.bottom{
			margin: 0 20rpx;
			padding: 5rpx 0;
			// background-color: #007AFF;
			.ctl {
				table-layout: fixed;
			
				.td_1 {
					color: #959595;
					vertical-align: top;
					width: 25%;
					word-break: break-all;
				}
			
				.td {
					word-break: break-all;
					color: #ffaa00;
				}
			}
		}
	}
</style>